<template>
    <div class="account">
        <div class="account-card">
            <div class="account-card-info">
                <span>{{ coffeeInfo.text }}</span>
                <span>x1</span>
            </div>
        </div>
        <div class="account-pay">
            <div class="account-pay-left">{{ coffeeInfo.price }}</div>
            <div class="account-pay-right" @click="toPay">去支付</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import type { ISelectCoffeeType } from "../home/index.vue";
import { computed, shallowRef } from "vue";
import { showToast } from "@/utils";
import useGlobalStore from "@/store/useGlobalStore"

defineOptions({ name: "account" });

interface IRouteProps {
    coffeeOptions: string;
}

const globalStore = useGlobalStore();
const router = useRouter();

const { coffeeOptions } = useRoute().query as unknown as IRouteProps;

const coffee = shallowRef<Array<ISelectCoffeeType>>(JSON.parse(coffeeOptions || [] as any));


const coffeeInfo = computed(() => {
    return {
        text: coffee.value.map(item => item.name).join("/"),
        price: coffee.value.reduce((total, current) => {
            return total + (current.price || 0);
        }, 0).toFixed(2)
    }
})

const toPay = () => {
    showToast({
        title: "温馨提示",
        content: "提交订单后将清空购物车，确认提交么",
        onConfirm() {
            globalStore.setKeepAliveHome(false);
            router.back();
        },
    })
}

</script>


<style lang="less" scoped>
@import "./index.less";
</style>
